<template>
    <div class="app-container">
        <el-form ref="management" :inline="true" size="small" style="display:flex;justify-content: space-between">
            <el-form-item>
                <el-input placeholder="请输入内容" suffix-icon="el-icon-search"></el-input>

            </el-form-item>
            <el-form-item>
                <el-button  icon="el-icon-plus" @click="handleAdd" style="background:linear-gradient(to right, #2b789c, #0bbb80);color:white;border:none">订阅</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="subData.slice((currentPage - 1) * pageSize, currentPage * pageSize)">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="用户ID" align="center" prop="UserID" width="170" />
            <el-table-column label="用户名称" align="center" prop="UserName" width="170" />
            <el-table-column label="能力ID" align="center" prop="CapaID" width="170" />
            <el-table-column label="能力名称" align="center" prop="CapaName" width="200" />
            <el-table-column label="能力对外地址" align="center" prop="AddressOut" width="400" />
            <el-table-column label="订阅时间" align="center" prop="Time" width="250" />
            <el-table-column label="操作" align="center" >
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleUpdate(scope.row, scope.$index)" icon="el-icon-edit"
                    style="background-color:rgb(42, 62, 104);color:white;border:none" >
                    </el-button>
                </template>
            </el-table-column>

        </el-table>
        <el-row>
            <el-col style="text-align:right">
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage" :page-sizes="[2, 5, 10, 15]" :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="subData.length">
                </el-pagination>

            </el-col>
        </el-row>
        <el-dialog :title="addTitle" :visible.sync="Open" width="500px" append-to-body>
            <el-form ref="form" :model="addForm" label-width="130px">
                <el-form-item label="订阅用户" prop="User">
                    <el-input v-model="addForm.User" placeholder="请输入名称" />
                </el-form-item>
                <el-form-item label="订阅服务" prop="Encoded">


                    <el-select v-model="addForm.Encoded" placeholder="请选择服务">
                        <el-option label="信息查询接口" value="infouserInfoUpdate/V1.0.0"></el-option>
                        <el-option label="信息更新接口" value="infouserInfoUpdate/V1.0.0"></el-option>
                        <el-option label="信息删除接口" value="infouserInfoUpdate/V1.0.0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="订阅时间" prop="Time">
                    <el-date-picker v-model="addForm.Time" type="datetime" placeholder="选择日期时间" align="right"
                        :picker-options="pickerOptions" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss">
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="机构名称" prop="Name">
                    <el-input v-model="addForm.Name" placeholder="请输入名称" />
                </el-form-item>
                <el-form-item label="服务地址" prop="Address">
                    <el-input v-model="addForm.Address" placeholder="请输入地址" />
                </el-form-item>

            </el-form>

        </el-dialog>
        <!-- <el-dialog :title="detailTitle" :visible.sync="ClickOpen" append-to-body>
            <el-descriptions direction="vertical" :column="2" border>
                <el-descriptions-item label="订阅用户" label-class-name="my-label">{{ ClickList.User
                    }}</el-descriptions-item>
                <el-descriptions-item label-class-name="my-label" label="订阅服务">{{ ClickList.Encoded
                    }}</el-descriptions-item>
                <el-descriptions-item label="订阅时间">{{ ClickList.Time }}</el-descriptions-item>
                <el-descriptions-item label="机构名称">{{ ClickList.Name }}
                </el-descriptions-item>
                <el-descriptions-item label="服务地址">{{ ClickList.Address }}</el-descriptions-item>
                <el-descriptions-item label="状态"><el-tag size="small">{{ ClickList.State }}</el-tag>
                </el-descriptions-item>
            </el-descriptions>
        </el-dialog> -->
        <!-- <el-dialog :title="auditTitle" :visible.sync="auditOpen" append-to-body >
            <el-descriptions direction="vertical" :column="2" border >
                <el-descriptions-item label="订阅用户" >{{ auditForm.User }}</el-descriptions-item>
                <el-descriptions-item  label="订阅服务">{{ auditForm.Encoded}}</el-descriptions-item>
                <el-descriptions-item label="订阅时间">{{ auditForm.Time }}</el-descriptions-item>
                <el-descriptions-item label="机构名称">{{ auditForm.Name }}
                </el-descriptions-item>
                <el-descriptions-item label="服务地址">{{ auditForm.Address }}</el-descriptions-item>
                <el-descriptions-item label="状态"><el-tag size="small">{{ auditForm.State }}</el-tag>
                </el-descriptions-item>
            </el-descriptions>
            <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="auditSuccess">审核通过</el-button>
        <el-button @click="auditFail">不通过</el-button>
      </div>
        </el-dialog> -->
        <el-dialog :title="modifyTitle" :visible.sync="UpdateOpen" width="500px" append-to-body>
            <el-form ref="form" :model="modifyForm" label-width="130px">
                <el-form-item label="用户ID" prop="UserID">
                    <el-input v-model="modifyForm.User" :disabled="true" placeholder="请输入能力名称" />
                </el-form-item>
                <el-form-item label="用户名称" prop="UserName">
                    <el-input v-model="modifyForm.Encoded" placeholder="请输入创建者" />
                </el-form-item>
                <el-form-item label="能力ID" prop="CapaID">
                    <el-input v-model="modifyForm.Encoded" placeholder="请输入用户ID" />
                </el-form-item>
                <el-form-item label="能力名称" prop="CapaName">
                    <el-input v-model="modifyForm.Address" placeholder="请输入能力名称" />
                </el-form-item>
                <el-form-item label="能力对外地址" prop="AddressOut">
                    <el-input v-model="modifyForm.Address" placeholder="请输入能力地址" />
                </el-form-item>
                <el-form-item label="订阅时间" prop="Time">
                    <el-date-picker v-model="modifyForm.Time" type="datetime" placeholder="选择日期时间" align="right"
                        :picker-options="pickerOptions"  format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"> 
                    </el-date-picker>
                   
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="confirm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>


        </el-dialog>


    </div>
</template>

<script>
export default {
    data() {
        return {
            Open: false,
            total: 2,
            pageNum: 2,
            pageSize: 2,
            currentPage: 1,
            detailTitle: '详情',
            UpdateOpen: false,
            modifyTitle: '修改',
            ClickOpen: false,
            addTitle: '新增订阅',
            auditOpen: false,
            auditTitle: '审核',
            addForm: {
                User: '',
                Name: '',
                Encoded: '',
                Address: '',
                Time: '',
                State: '',
            },
            modifyForm: {
                Id: '',
                User: '',
                Name: '',
                Encoded: '',
                Address: '',
                Time: '',
                State: '',
                StateList: [
                    {
                        value: '1',
                        label: '已订阅'
                    },
                    {
                        value: '2',
                        label: '未订阅'
                    }

                ]

            },
            auditForm: {
                Id: '',
                User: '',
                Name: '',
                Encoded: '',
                Address: '',
                Time: '',
                State: '',

            },


            subData: [
                {
                    UserID: '001',
                    UserName: '张三',
                    CapaID: '001',
                    CapaName: '能力名称',
                    AddressOut: 'http://127.0.0.1:8080/infouserInfoUpdate/V1.0.0',
                    Time: '2017-12-03 12:22:09',
                    Address: 'infouserInfoUpdate/V1.0.0',
                    
                },
                { 
                     UserID: '002',
                    UserName: '王五',
                    CapaID: '001',
                    CapaName: '能力名称',
                    AddressOut: 'http://127.0.0.1:8080/infouserInfoUpdate/V1.0.0',
                    Time: '2017-12-03 12:22:09',
                    Address: 'infouserInfoUpdate/V1.0.0',
                    

                },
                {
                    capaName: '能力名称',
                    User: '王武',
                    id: '002',
                    Time: '2017-12-03 12:22:09',
                    Address: 'infouserInfoUpdate/V1.0.0',
                    AddressOut: 'http://127.0.0.1:8080/infouserInfoUpdate/V1.0.0',


                },
                {
                    capaName: '能力名称',
                    User: '王武',
                    id: '002',
                    Time: '2017-12-03 12:22:09',
                    Address: 'infouserInfoUpdate/V1.0.0',
                    AddressOut: 'http://127.0.0.1:8080/infouserInfoUpdate/V1.0.0',



                },
            ],
            ClickList: {
                Id: '',
                User: '',
                Name: '',
                Encoded: '',
                Address: '',
                Time: '',
                State: ''
            }

        }
    },
    methods: {
        audit(row) {
            console.log(row);
            this.auditOpen = true;
            this.auditForm = row;

        },
        auditSuccess() {
            this.auditOpen = false;
            this.subData[this.subData.indexOf(this.auditForm)].State = '已审核';
        },
        auditFail() {
            this.auditOpen = false;
            this.subData[this.subData.indexOf(this.auditForm)].State = '未审核';
        },
        handleAdd() {
            this.Open = true;
        },
        handleDelete(idx) {
            console.log(idx);

            this.$confirm('确认删除该条记录吗？')
                .then(() => {
                    console.log('confirm');
                    this.subData.splice(idx, 1);
                })
                .catch(() => {
                    console.log('cancel');
                });

        },

        handleClick(row) {
            console.log(row);
            this.ClickOpen = true;
            this.ClickList.User = row.User;
            this.ClickList.Name = row.Name;
            this.ClickList.Encoded = row.Encoded;
            this.ClickList.Address = row.Address;
            this.ClickList.Time = row.Time;
            this.ClickList.State = row.State;

        },
        handleUpdate(row, idx) {
            this.UpdateOpen = true;
            console.log(row);
            this.modifyForm = row;
            this.userIndex = idx;

        },
        cancel() {
            this.UpdateOpen = false;
        },
        confirm() {
            this.UpdateOpen = false;
            this.subData[this.userIndex] = this.modifyForm;
        },
        handleSizeChange(val) {
            this.currentPage = 1
            this.pageSize = val
        },
        handleCurrentChange(val) {
            this.currentPage = val
        }

        // handleSizeChange(val) {
        //     console.log(`每页 ${val} 条`);
        // },
        // handleCurrentChange(val) {
        //     console.log(`当前页: ${val}`);
        // },
        // handleSizeChange(size) {
        //     //修改当前每页的数据行数
        //     this.pagesize = size;
        //     //数据重新分页
        //     this.getPageInfo();
        // },
        // handleCurrentChange(pageNumber) {
        //     //修改当前的页码
        //     this.currentpage = pageNumber;
        //     //数据重新分页
        //     this.getPageInfo()
        // },
        // getPageInfo() {
        //     //清空pageTicket中的数据
        //     this.subData = [];
        //     // 获取当前页的数据
        //     for (let i = (this.currentpage - 1) * this.pagesize; i < this.total; i++) {
        //         //把遍历的数据添加到pageTicket里面
        //         this.subData.push(this.ticket[i]);
        //         //判断是否达到一页的要求
        //         if (this.subData.length === this.pagesize) break;
        //     }
        // },

    },


}
</script>

<style scoped>
.el-input {
    width: 430px;
}

/* .my-label {
    background-color: #a4cff7;
} */
.audit {
    margin-left: 40%;


}

.auditFail {
    margin-left: 5%;


}
</style>